<!-- footer -->
<template>
    <div class="footer">
        <div class="footer_link">
            <div
                @click="LinkClick(item)"
                :class="{
                    link: true,
                    disabled: item.meta.disabled,
                    isactive: PagePath.indexOf(item.path) != -1
                }"
                v-for="item in Link"
                :key="item.key"
            >
                <div class="link_name">
                    {{ item.meta.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, Ref, ref, UnwrapRef } from 'vue'
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
import { HomeItem } from '@/router/modules/home'
// 路由监听
onBeforeRouteUpdate((to: any) => {
    PagePath.value = to.path
})

const Router = useRouter()
const Route = useRoute()
const PagePath = ref('')
interface LinkType {
    name: string
    path: string
    component: string
    meta: {
        name: string
    }
}
// 路由信息
const Link: Array<LinkType> = JSON.parse(JSON.stringify(HomeItem))

// 一级路由点击
const LinkClick = (val: any) => {
    if (val.meta.disabled) {
        console.log('跳不了哇')
    } else {
        // Router.push({
        //   path: val.path,
        // });
        PagePath.value = val.path
    }
}

onMounted(() => {
    // PagePath.value = Route.path;
})
</script>
<style lang="scss" scoped>
.footer {
    margin: auto;
    z-index: 10;

    .footer_link {
        margin: auto;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;

        .link {
            height: 52px;
            margin: 0 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            cursor: pointer;
            font-size: 22px;
            display: flex;

            .link_name {
                width: 172px;
                height: 52px;
                letter-spacing: 2px;
                font-family: OPPOSans;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #d4d8e6;
                font-weight: bold;
                text-shadow: 0 0 5px #000;
                border-top-right-radius: 20px;
                border-bottom-left-radius: 20px;
                transition: all 0.2s;
                &:hover {
                    background: url('@/assets/images/基础/menu_currentBg.png') no-repeat center/cover;
                    background-size: 100% 100%;
                }
            }
        }

        .disabled {
            .link_name {
                color: #9b9b9b !important;
                &:hover {
                    background: none !important;
                }
            }
        }

        .isactive {
            .link_name {
                color: #fff;
                background: url('@/assets/images/基础/menu_currentBg.png') no-repeat center/cover;
                background-size: 100% 100%;
            }
        }
    }
}
</style>
